<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body> 
    <div class="group">
        <input type="text" class="todovalue" name="todovalueName" id="todovalueId" placeholder="请输入
        TODO内容"
            onkeydown="valueChange(event)"/>
        
        <input type="button" value="BUTTON2" onclick="handleclick()">
        <button type="button" id="button3">BUTTON3</button>
    

        <div id="todoList">
            <div class="item" id="item0">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭0</div>
                <input id="item-del-0" class="item-del" type="button" value="删除" 
                onclick="handleDelClick(0)" >
            </div>
            <div class="item"id="item1">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭1</div>
                <input id="item-del-1" class="item-del" type="button" value="删除"
                 onclick="handleDelClick(1)">
            </div>
            <div class="item" id="item2">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭2</div>
                <input id="item-del-2" class="item-del" type="button" value="删除" 
                onclick="handleDelClick(2)">
            </div>
        </div>
    </div>
</body>
<script lang="javascript">
    var index = 0;
    function init() {
        document.getElementById("button3").onclick = handleclick;
    }

    function valueChange(e) {
        console.log(e);
        if (event.keyCode == 13) {
            handleclick();
        }
    }

    function handleclick() {
        var temp = document.getElementsByName("todovalueName")[0].value;
        var div = document.createElement("div");
        div.innerText = temp;
        var t = "<div class='item' id='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div  class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + " </div>"
        index++;
        document.getElementById("todoList").innerHTML += t;
    }

    function test1(index){
        // console.log("test121111");
        // document.getElementById("todoList").children[index].style="background-color:red";
        // document.getElementById("item-del-"+index).style="opacity: 1";
    }
    function test2(index){
        // console.log("test22222222");
        // document.getElementById("todoList").children[index].style="";
        // document.getElementById("item-del-"+index).style="opacity: 0";
    }

    function handleDelClick(index){
        var arr=document.getElementById("todoList");
        console.log(arr);
        document.getElementById("item"+index).remove();
        // document.getElementById("todoList").removeChild(arr.childNodes[index]);
    }
    init();
</script>
<style>
    body{
        display:flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;

    }
    .group{
        border: 1px solid blue;
        padding: 10px;

        border-radius: 20px;
    }

    .item{
        /* display: none; */
        /* opacity: 0; */
        /* background-color: rgba(red, green, blue, alpha); */
        margin:3px;
        padding:3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .item:hover{
        background-color: aqua;

        transform: scale(1,2);
        transition: ;
    }
    .item-sp{
        flex-grow: 1;
    }
    .item-del{
        background-color: red;
        border: 0px;
        color: aliceblue;

        opacity:0;
    }
    .item:hover .item-del{
        opacity: 1;
    }

    .todovalue{
        border: 1px solid #333;
        padding:6px;
        outline: none;
    }
    .todovalue:focus{
        box-shadow:0px 0px 9px #4086cd ;
        border: 2px solid #4086cd;

        outline: none;

    }
</style>

</html>